<template>
    <div class="app-container">
        <div class="filter-container">
            <el-form ref="listQuery" :model="listQuery" inline>
                <el-form-item label="进厂批次" prop="tmpEnterBatchCode">
                    <el-select size="small" class="filter-item" style="width: 150px" v-model="listQuery.tmpEnterBatchCode" placeholder="请选择进厂批次" @change="batchCodeChange">
                        <el-option v-for="item in batchCodeOptions" :key="item" :label="item" :value="item"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="所属医院" prop="hid">
                    <el-select size="small" clearable class="filter-item" :disabled="true" style="width: 150px" v-model="listQuery.hid" placeholder="请选择所属医院">
                        <el-option v-for="item in hospitalOptions" :key="item.name" :label="item.name" :value="item.id"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="分类">
                    <el-row class="pd1020" style="width:500px">
                        <el-col :xs="{span: 15}" :sm="{span: 15}" :md="{span: 15}" :lg="{span: 15}" :xl="{span: 15}" style="padding-right:10px;height: 40px;line-height: 40px;">
                            <el-input placeholder="请输入热塑码,无法扫码时，请手动输入" @focus="ipt_scan=''" @keyup.enter.native="getInfo" ref="ipt_scan" v-model="ipt_scan" clearable> </el-input>
                        </el-col>
                        <el-col :xs="{span: 3}" :sm="{span: 3}" :md="{span: 3}" :lg="{span: 3}" :xl="{span: 3}" style="padding-right:10px;font-size: 35px;width: 45px;line-height: 40px;">
                            <div @click="focusInput"><svg-icon icon-class="scan" /></div>
                        </el-col>
                        <el-col :xs="{span: 4}" :sm="{span: 4}" :md="{span: 4}" :lg="{span: 4}" :xl="{span: 4}" style="padding-right:10px;height: 40px;
    line-height: 38px;">
                            <el-button size="small" class="filter-item" type="primary" icon="el-icon-search" @click="getInfo">查询</el-button>
                        </el-col>
                    </el-row>
                </el-form-item>
            </el-form>
        </div>
        <el-row style="border-top: 1px solid #ddd;">
            <el-col :span="14">
                <div style="height: 32px;line-height: 32px;margin: 20px 0 20px 0;">
                    录入记录
                </div>
                <el-table :key='tableKey' :data="list" border fit highlight-current-row style="width: 100%" stripe>
                    <el-table-column align="center" width="60px" type="index" label="序号"></el-table-column>
                    <el-table-column align="center" label="科室" prop="departmentName"></el-table-column>
                    <el-table-column align="center" label="分类" prop="categoryName"></el-table-column>
                    <el-table-column align="center" label="热塑码" prop="clothesBarCode"></el-table-column>
                    <el-table-column align="center" label="所属医生" prop="doctorName"></el-table-column>
                    <el-table-column align="center" label="缝补" width="60px">
                        <template slot-scope="scope">
                            <el-checkbox v-model="scope.row.checked" @change="changeClothCnt(scope.row)"></el-checkbox>
                        </template>
                    </el-table-column>
                    <el-table-column align="center" label="操作" class-name="small-padding fixed-width">
                        <template slot-scope="scope">
                            <el-button size="small" type="danger" @click="handleDelete(scope.row, scope.$index)">删除</el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </el-col>
            <el-col :span="10">
                <div style="height: 32px;line-height: 32px;margin: 20px 0 20px 0;">
                    打捆列表
                </div>
                <el-table :key='2' :data="sumList" border fit highlight-current-row style="width: 100%" stripe>
                    <el-table-column align="center" type="index" width="60px" label="序号"></el-table-column>
                    <el-table-column align="center" label="科室" prop="departmentName"></el-table-column>
                    <el-table-column align="center" label="品类">
                        <template slot-scope="scope">
                            工作服
                        </template>
                    </el-table-column>
                    <el-table-column align="center" label="衣物总量" prop="count"></el-table-column>
                    <el-table-column align="center" label="缝补总量" prop="mendCnt"></el-table-column>
                    <el-table-column align="center" label="操作" class-name="small-padding fixed-width">
                        <template slot-scope="scope">
                            <el-button size="small" type="primary" @click="handleConfirm(scope.row, scope.$index)">打捆</el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </el-col>
        </el-row>

        <el-dialog title="确认打捆" center :visible.sync="dialogPrint" @close="dialogPrint=false">
            <print :data="printData"></print>
        </el-dialog>
    </div>
</template>

<script>
  import { mapGetters } from 'vuex'
  import { parseTime } from '@/utils'
  import print from '@/components/PrintTicket/print'
  import { fetchHospitalList, hospitalBatchOrderRecentList } from '@/api/hospital'
  import { factoryBalingAddDetail, factoryBalingModifyDetail, factoryBalingDelete, factoryBalingCreate, fetchFactoryBalingByCode, factoryBalingPrepareCreate } from '@/api/factory'

  export default {
    name: 'PackWork',
    data() {
      return {
        tableKey: 0,
        list: [],
        sumList: [],
        listQuery: {
          hid: '',
          enterBatchCode: '',
          tmpEnterBatchCode: ''
        },
        hospitalOptions: [],
        batchCodeOptions: [],
        ipt_scan: '',
        dialogPrint: false,
        printData: {}
      }
    },
    components: {
      print
    },
    created: function() {
      this.getHospital()
      this.getBatchCode()
    },
    computed: {
      ...mapGetters([
        'fid'
      ])
    },
    filters: {
      parseTime
    },
    methods: {
      batchCodeChange() {
        if (this.list.length || this.sumList.length) {
          this.$confirm('更换进场批次将无法保存当前录入数据', '尚未完成打捆！确定要更换吗？', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
            this.listQuery.enterBatchCode = this.listQuery.tmpEnterBatchCode
            this.prepareCreateBaling()
            this.ipt_scan = ''
            this.list = []
            this.sumList = []
          }).catch(() => {
            this.listQuery.tmpEnterBatchCode = this.listQuery.enterBatchCode
          })
        } else {
          this.listQuery.enterBatchCode = this.listQuery.tmpEnterBatchCode
          this.prepareCreateBaling()
          this.ipt_scan = ''
        }
      },
      changeClothCnt(row) {
        let mendCnt = 0
        if (row.checked) {
          mendCnt = 1
        }
        factoryBalingModifyDetail({ id: row.id, clothesCnt: row.clothesCnt, mendCnt: mendCnt }).then(response => {
          if (response.data) {
            this.list = this.formatList(response.data.detailList || [])
            this.sumList = response.data.summary || []
          }
        })
      },
      getBatchCode() {
        hospitalBatchOrderRecentList({ page: 1, size: 50 }).then(response => {
          this.batchCodeOptions = response.data || []
        })
      },
      getHospital() {
        fetchHospitalList({ page: 1, size: 500, fid: this.fid }).then(response => {
          this.hospitalOptions = response.data && response.data.list || []
        })
      },
      prepareCreateBaling() {
        if (!this.listQuery.enterBatchCode) return
        factoryBalingPrepareCreate({ batchCode: this.listQuery.enterBatchCode, type: 2 }).then(response => {
          if (response.data) {
            this.list = this.formatList(response.data.detailList || [])
            this.sumList = response.data.summary || []
            this.listQuery.hid = response.data.hid || ''
          }
        })
      },
      focusInput() {
        // this.ipt_scan = ''
        this.$refs['ipt_scan'].focus()
      },
      getInfo() {
        if (!this.listQuery.enterBatchCode) {
          this.$message({ message: '请先选择进厂批次', type: 'error', showClose: true })
          return
        }
        if (!this.ipt_scan) {
          this.$message({ message: '请输入或扫码热塑码', type: 'error', showClose: true })
          return
        }
        factoryBalingAddDetail({ batchCode: this.listQuery.enterBatchCode, type: 2, barcode: this.ipt_scan, mendCnt: 0 }).then(response => {
          if (response.data) {
            this.list = this.formatList(response.data.detailList || [])
            this.sumList = response.data.summary || []
          }
        })
      },
      handleDelete(row) {
        factoryBalingDelete({ id: row.id }).then(response => {
          if (response.data) {
            this.list = this.formatList(response.data.detailList || [])
            this.sumList = response.data.summary || []
          }
        })
      },
      formatList(list) {
        list.forEach((item) => {
          item.checked = false
          if (item.mendCnt > 0) {
            item.checked = true
          }
        })
        return list
      },
      handleConfirm(row, index) {
        if (!this.listQuery.enterBatchCode) {
          this.$message({ message: '请先选择进厂批次', type: 'error', showClose: true })
          return
        }
        factoryBalingCreate({ batchCode: this.listQuery.enterBatchCode, type: 2, departmentId: row.departmentId }).then(response => {
          if (response.data) {
            fetchFactoryBalingByCode({ code: response.data.code }).then(response => {
              this.printData = response.data || {}
              this.dialogPrint = true
            })
            this.prepareCreateBaling()
          }
        })
      }
    }
  }
</script>

<style scoped>
    .el-col.el-col-12 {
        padding: 0 15px;
    }
    .el-col.el-col-14 {
        padding-right: 20px;
    }
</style>
